/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {
      maxWidth: {
        '80%': '80%',
      }
    },
    screens: {
      /* 
       * Tailwind 采用移动端优先的断点系统，Tailwind uses a mobile-first breakpoint system
       * 所以要开发桌面端布局时，加上前缀 desktop:text-center，这里设置大于640px的媒体查询即是桌面端
       */
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  },
  plugins: [],
};
